<template>
	<main class="cart_box" style="padding-bottom: 140px;">
		<!--<div class="cart_tip clearfix">
			<span>登录后可同步电脑与手机购物车中的商品</span>
			<a href="#" class="login">登录</a>
		</div>-->

		<div class="cart_content clearfix" v-for="item in cartDatas">
			<div class="cart_shop clearfix">
				<div class="shop_info clearfix">
					<!--<img src="../assets/images/buy-logo.png" alt="" class="shop_icon">-->
					<span class="shop_name">自营商品</span>
				</div>
				<!--<div class="cart_free clearfix">
					<span class="free_tip">优惠券></span>
				</div>-->
			</div>
			<div class="cart_item">
				<div class="cart_item_box">
					<div @click="CheckedItem(item)" class="check_box" :checked="item.checkedi">
					</div>
				</div>
				<div class="cart_detial_box clearfix">
					<a href="javascript:void(0)" class="cart_product_link">
						<img v-lazy="root + item.ImgPath" alt="">
					</a>
					<div class="item_names">
						<a href="javascript:void(0)">
							<span class="two_line_text">{{item.ProductName}}</span>
						</a>
					</div>
					<div class="cart_weight">
						<i class="my_weigth">{{item.Content}}</i>
					</div>
					<div class="cart_product_sell">
						<span class="product_money">￥<strong class="real_money">{{item.SalePrice}}</strong></span>
						<div class="cart_add clearfix">
							<span class="my_add" @click="AddNum(item)">+</span>
							<input @change="InputChange(item)" type="number" class="my_count" v-model="item.Quantity">
							<span class="my_jian" @click="ReduceNum(item)">-</span>
						</div>
					</div>
					<div @click="DelItem(item)" class="cart_del clearfix">
						<div class="del_top">
						</div>
						<div class="del_bottom">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div v-if="cartDatas.length>0" class="cart_fo">
			<footer class="cart_footer">
				<div class="all_check_box">
					<div class="check_box" @click="CheckAll" :checked="checkAll">

					</div>
					<span>全选</span>
				</div>
				<div class="count_money_box">
					<div class="heji line_height40 color_main_red font_size16">
						<strong>合计:</strong>
						<strong>￥</strong>
						<strong>{{totalPrice.toFixed(2)}}</strong>
					</div>
					<!--<div class="total_money clearfix">
						<span>总额:</span>
						<i>￥</i>
						<span>500.00</span>
						<span>立减:</span>
						<i>￥</i>
						<span>50.00</span>
					</div>-->
					<a @click="ToSettelBtn" href="javascript:void(0)" class="go_pay">
						<span>去结算</span>
					</a>
				</div>
			</footer>
		</div>
		<div v-if="emptyCartShow" class="text_align_ct padding_top45">
			<img src="../assets/images/empty_cart_icon.png"/>
			<p>购物车暂无商品</p>
		</div>
	</main>
</template>
<script>
	import { Toast } from 'mint-ui';
	import { MessageBox } from 'mint-ui';

	export default {
		created() {
			this.getCartDatas()
		},
		data() {
			return {
				root: this.root,
				cartDatas: [],
				checkAll: false,
				totalPrice: 0.00,
				emptyCartShow: false,
			}
		},
		mounted() {

		},
		methods: {
			getCartDatas() {
				let _this = this;
				_this.$http.get('/Client/Carts', null, localStorage.Authorization, res => {
					if(res.code === 200) {
						console.log('购物车res', res)
						_this.cartDatas = res.data.list;
						for(var i = 0; i < _this.cartDatas.length; i++) {
							_this.$set(_this.cartDatas[i], 'checkedi', false)
							_this.getProductDetails(_this.cartDatas[i].ProductId, _this.cartDatas[i])
							_this.getProductType(_this.cartDatas[i].SkuId, _this.cartDatas[i])
						}
						if(_this.cartDatas.length===0) {
							_this.emptyCartShow = true
						}
					}else if(res.code === 101) {
						localStorage.fromPath = _this.$route.fullPath
						_this.$router.push({
							path: '/login'
						})
					}
				})
			},
			CheckAll() {
				let _this = this
				for(var i = 0; i < _this.cartDatas.length; i++) {
					_this.cartDatas[i].checkedi = !_this.checkAll
				}
				_this.checkAll = !_this.checkAll
			},
			ReduceNum(item) {
				if(item.Quantity <= 1) {
					return false;
				}
				item.Quantity--
			},
			CheckedItem(item) {
				let _this = this
				item.checkedi = !item.checkedi
				//				for(var i = 0; i < _this.cartDatas.length; i++) {
				//					_this.cartDatas[i].checkedi = !_this.checkAll
				//				}
				_this.checkAll = _this.cartDatas.every(function(item) {
					return item.checkedi;
				})
				console.log('_this.checkAll', _this.checkAll)
			},
			AddNum(item) {
				item.Quantity++
			},
			InputChange(item) {
				console.log(item)
			},
			DelItem(item) {
				let _this = this
				MessageBox.confirm('确定删除该商品？').then(action => {
					_this.$http.delete('/client/Carts/' + item.Id, null, localStorage.Authorization, res => {
						console.log('删除购物车商品res', res)
						if(res.code === 200) {
							Toast(res.data)
							setTimeout(function() {
								_this.$router.go(0)
							}, 1000)
						}
					})
				}).catch(action => {

				})
			},
			getProductDetails(productId, cartData) {
				var _this = this
				_this.$http.get('/client/Products/' + productId+'?OnSale=1', null, localStorage.Authorization, res => {
					console.log('根据id获取商品title res', res)
					if(res.code == 200) {
						_this.$set(cartData, 'ProductName', res.data.ProductName)
						_this.$set(cartData, 'ImgPath', res.data.ImgPath)
					}
				})
			},
			getProductType(SkuId, cartData) {
				var _this = this
				console.log('SkuId', SkuId)
				_this.$http.get('/client/Skus/' + SkuId, null, localStorage.Authorization, res => {
					console.log('根据skuid获取商品type res', res)
					if(res.code == 200) {
						_this.$set(cartData, 'Content', res.data.Content)
						_this.$set(cartData, 'SalePrice', res.data.SalePrice)

					}
				})
			},
			ToSettelBtn() {
				var _this = this
				var goodsDataList = []
				for(var i = 0; i < _this.cartDatas.length; i++) {
					if(_this.cartDatas[i].checkedi === true) {
						goodsDataList.push(_this.cartDatas[i])
					}
				}
				if(goodsDataList.length == 0) {
					Toast('请选择商品！')
					return false;
				}
				_this.$router.push({
					path: '/settle',
					query: {
						'goodsDataList': goodsDataList
					}
				})
			}
		},
		watch: {
			cartDatas: {
				handler: function(nval, oval) {
					let _this = this
					this.totalPrice = 0;
					for(var i = 0; i < nval.length; i++) {
						if(nval[i].checkedi === true) {
							_this.totalPrice += nval[i].Quantity * Number(nval[i].SalePrice)
						}
					}
				},
				deep: true,
			}
		}
	}
</script>
<style scoped="scoped">
	.cart_footer {
		bottom: 60px;
	}
</style>